<template>
    <div class="third-interface-wrapper">
        <div class="history-back">
            <el-button type="text" icon="el-icon-back" size="medium" @click="$store.state.views = 0">返回</el-button>
        </div>
        <div class="total-interface">
            <div class="third-interface-left">
                <div class="third-interface-left-left">
                    <dv-border-box-12>
                        <div class="inner">
                            <controlEquipment></controlEquipment>
                        </div>
                    </dv-border-box-12>
                </div>
                <div class="third-interface-left-right">
                    <dv-border-box-13>
                        <div class="inner">
                            <temForecast></temForecast>
                        </div>
                    </dv-border-box-13>
                </div>
            </div>
            <div class="third-interface-right">
                <dv-border-box-9>
                    <div class="inner">
                        <waterForecast></waterForecast>
                    </div>
                </dv-border-box-9>
            </div>
        </div>
    </div>
</template>

<script>
    import controlEquipment from "./controlEquipment";
    import temForecast from "./temForecast";
    import waterForecast from "./waterForecast";
    export default {
        name: "thirdInterface",
        components:{
            controlEquipment,
            temForecast,
            waterForecast,
        }
    }
</script>

<style scoped lang="scss">
    .third-interface-wrapper{
        height: 11rem;
        .history-back{
            width: 100%;
            height: 0.6rem;
        }
        .total-interface{
            height: 10.4rem;
            display: flex;
            font-size: 0.2rem;
            flex-flow: column nowrap;
            .third-interface-left{
                height: 6rem;
                display: flex;
                .third-interface-left-left{
                    height: 100%;
                    width: 40%;
                }
                .third-interface-left-right{
                    height: 100%;
                    width: 60%;
                }
            }
            .third-interface-right{
                height: 4.4rem;
            }
        }
    }
    .inner{
        padding: 0.25rem;
    }
</style>
